<main-layout [sliderWidth]="sliderWidth" (toggle)="this.toggleCollapsed($event)" >
  <main-content >
    <div class="chooseHead">
      <div class="ctit"><i class="anticon anticon-left-circle-o" routerLink="/member/store-product/list"></i>
        <span class="content-title">新建通知</span></div>
    </div>
    <nz-steps [nzCurrent]="current">
      <nz-step nzTitle="选择模板"></nz-step>
      <nz-step nzTitle="模板内容"></nz-step>
      <nz-step nzTitle="发送时间"></nz-step>
      <nz-step nzTitle="确认下发"></nz-step>
    </nz-steps>
    <div class="steps-content" *ngIf="current === 0">
      <div class="clearfix">
        <div *ngFor="let data of templateList" class="temCard" [ngClass]="{'active': templateId == data.id}" (click)="chooseTemplate(data.id)">
          <div class="chead">
            <span>选择模板</span>
          </div>
          <div class="cbody">
            <div class="bhead">
              <p>{{data.title}}</p>
              <p>ID:{{data.id}}</p>
            </div>
            <span class="segline"></span>
            <div *ngFor="let x of data.extend.keyword_list" class="content">
              <span class="tcName">{{x}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tcCont">{{x}}内容</span>
            </div>
            <button *ngIf="data.id == templateId" class="confirm-btn" nz-button [nzType]="'primary'" [nzSize]="large" (click)="goModule($event,data)">确定</button>
          </div>
        </div>
      </div>
      <div class="pagination-wrapper">
        <nz-pagination [nzPageIndex]="page" [nzTotal]="total" (nzPageIndexChange)="getOwnerTemplateList($event)"></nz-pagination>
      </div>
    </div>

    <div class="steps-content" *ngIf="current !== 0 && current !== 4">
      <div nz-row>
        <div nz-col [nzSpan]="12" style="position: relative;">
          <div class="template-content-preview">
            <img src="{{ 'assets/images/template_model.png' }}" alt="">
            <div>
                <p class="preview-title">{{ title }}</p>
                <p class="preview-created">{{ created }}</p>
              <div class="preview-detail">
                <div class="keyword-info" *ngFor="let k of keyWordList;let i = index;" nz-row>
                  <span style="vertical-align: top;">{{ k }}</span>
                  <textarea style="border:none;width:175px;overflow: hidden;text-overflow: ellipsis;word-break: break-word;-webkit-line-clamp:2;"  disabled *ngIf="haslen" name="{{ validateForm.controls['keyword' + [i+1]].value }}" [(ngModel)]="validateForm.controls['keyword' + [i+1]].value"></textarea>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div nz-col [nzSpan]="12">
          <form nz-form [formGroup]="validateForm">

            <ng-container *ngIf="current === 1">
              <div nz-form-item nz-row *ngFor="let k of extend_keyword;let i = index;">
                <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>{{ keyWordList[i] }}：</div>
                <div nz-form-control nz-col [nzSm]="20" [nzXs]="24"  [nzValidateStatus]="getFormControl('keyword' + (i+1) )">
                  <nz-input formControlName="{{ 'keyword' + (i+1) }}" [nzPlaceHolder]="'请输入'+ keyWordList[i]" [nzSize]="'large'"></nz-input>
                  <nz-checkbox-group  *ngIf="i === 0" [ngModelOptions]="{standalone: true}"  [(ngModel)]="checkOptionsOne" (ngModelChange)="checkOptions($event)"></nz-checkbox-group>
                  <div nz-form-explain style="clear:both;text-align: left;" *ngIf="getFormControl( 'keyword' + (i+1) ).dirty&&getFormControl('keyword' + (i+1)).hasError('required')">请输入{{ keyWordList[i] }}</div>
                </div>
              </div>
              <div nz-form-item nz-row>
                <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>链接类型：</div>
                <div nz-form-control nz-col [nzSm]="20" [nzXs]="24">
                  <nz-select style="width:180px;" [(ngModel)]="selectedOption" [ngModelOptions]="{standalone: true}" (ngModelChange)="toggleType($event)">
                    <nz-option
                      *ngFor="let option of options"
                      [nzLabel]="option.label"
                      [nzValue]="option"
                      [nzDisabled]="option.disabled"
                    >
                    </nz-option>
                  </nz-select>
                </div>
              </div>
              <div nz-form-item nz-row *ngIf="activeType === 3">
                <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>商品设置：</div>
                <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('page')">
                  <div class="init-content" *ngIf="!checkedGoodsInfo['id']">
                    <button nz-button [nzType]="'primary'" (click)="addGoods()">
                      <span><i class="anticon anticon-plus"></i> 添加商品</span>
                    </button>
                  </div>
                  <div class="checked-goods-container" *ngIf="!!checkedGoodsInfo['id']">
                    <div class="name">i
                      <img src="{{aliyunOssOutputUrl+'/'+checkedGoodsInfo.first_picture}}" alt="">
                      <div>{{checkedGoodsInfo.name}}</div>
                    </div>
                    <div class="info">
                      <div>
                        <span class="title">商品分类</span>
                        <nz-tag [nzColor]="'#fff'" *ngFor="let ite of checkedGoodsInfo.goods_category">{{ite}}</nz-tag>
                        <span *ngIf="checkedGoodsInfo.goods_category ? !checkedGoodsInfo.goods_category.length : true">无分类</span>
                      </div>
                      <div><span class="title">商品库存</span> <span>{{checkedGoodsInfo.in_stock}}</span></div>
                      <button nz-button [nzType]="'primary'" [nzSize]="'large'" class="fr change-goods-btn" (click)="addGoods()">
                        <span>更改内容</span>
                      </button>
                    </div>
                  </div>
                  <div nz-form-explain *ngIf="getFormControl('page').dirty&&getFormControl('page').hasError('required')">请选择商品</div>
                </div>
              </div>
              <div nz-form-item nz-row *ngIf="skuStatus && activeType === 3">
                <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>商品属性：</div>
                <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                  <label nz-checkbox *ngFor="let item of checkedGoodsInfo['sku']" [ngModelOptions]="{standalone: true}" [(ngModel)]="item.checked" (ngModelChange)="dealSku()">
                    <span>{{item.name||item.describe||'无规格'}}</span>
                  </label>
                  <div nz-form-explain *ngIf="!hasCheckedSku">请至少选择一个商品属性</div>
                </div>
              </div>
              <div nz-form-item nz-row *ngIf="activeType === 4">
                <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>选择活动：</div>
                <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('page')">
                  <div class="init-content" *ngIf="!checkedActivityInfo['id']">
                    <button nz-button [nzType]="'primary'" (click)="addActivity()">
                    <span>
                      <i class="anticon anticon-plus"></i> 添加活动</span>
                    </button>
                  </div>
                  <div class="checked-goods-container" *ngIf="!!checkedActivityInfo['id']">
                    <div class="name">
                      <nz-tag [nzColor]="checkedActivityInfo['type']['color']">{{ checkedActivityInfo['type']['text'] }}</nz-tag>
                      <span>{{checkedActivityInfo['name']}}</span>
                    </div>
                    <div class="info">
                      <span class="title">活动有效期:</span>
                      <span class="title-content">从 {{ checkedActivityInfo['start_date'] }} 至 {{ checkedActivityInfo['end_date'] }}</span>
                      <span class="view-goods-btn" (click)="toggleViewActivityGoods()">查看商品
                      <i class="anticon" [ngClass]="{'anticon-up':checkedActivityInfo['flexable'],'anticon-down':!checkedActivityInfo['flexable']}"></i>
                    </span>
                      <button nz-button [nzType]="'primary'" [nzSize]="'large'" class="fr change-goods-btn" (click)="addActivity()">
                        <span>更改活动</span>
                      </button>
                    </div>
                    <div class="goods-wrap" *ngIf="checkedActivityInfo['flexable']">
                      <div>
                        <div>ID:{{ checkedActivityInfo['goodsDetail']['id'] }}</div>
                        <div class="goods-bt">
                          <div class="goods-name">{{ checkedActivityInfo['goodsDetail']['goods_name'] }}</div>
                          <div class="goods-right">
                            <div>商品价格</div>
                            <div>￥ {{ checkedActivityInfo['goodsDetail']['price'] }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div nz-form-explain *ngIf="getFormControl('page').dirty&&getFormControl('page').hasError('required')">请选择拼团商品</div>
                </div>
              </div>
              <div nz-form-item nz-row *ngIf="activeType === 6">
                <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>选择卡券：</div>
                <div nz-form-control nz-col [nzSm]="20" [nzXs]="24" [nzValidateStatus]="getFormControl('page')">
                  <div class="init-content" *ngIf="!checkedCouponInfo['id']">
                    <button nz-button [nzType]="'primary'" (click)="addCoupon()">
                    <span>
                      <i class="anticon anticon-plus"></i> 添加卡券</span>
                    </button>
                  </div>
                  <div class="checked-goods-container" *ngIf="!!checkedCouponInfo['id']">
                    <div class="name">
                      <img src="{{ 'assets/images/coupon_icon.png' }}" alt="">
                      <span>{{ checkedCouponInfo['card_coupons_name'] }}</span>
                    </div>
                    <div class="info">
                      <div>
                        <span class="title">卡券有效期</span>
                        <span *ngIf="checkedCouponInfo['term_of_validity_time_start']" style="font-size: 12px;">{{checkedCouponInfo['term_of_validity_time_start']}} - {{checkedCouponInfo['term_of_validity_time_end']}}</span>
                        <span *ngIf="checkedCouponInfo['term_of_validity']" style="font-size: 12px;">{{ '领取后' + checkedCouponInfo['term_of_validity'] + '天内有效' }}</span>
                      </div>
                      <div>
                        <span class="title" style="font-size: 12px;">卡券库存</span>
                        <span>{{checkedCouponInfo['in_stock']}}</span>
                      </div>
                      <button nz-button [nzType]="'primary'" [nzSize]="'large'" class="fr change-goods-btn" (click)="addCoupon()">
                        <span>更改内容</span>
                      </button>
                    </div>
                  </div>
                  <div nz-form-explain *ngIf="getFormControl('page').dirty&&getFormControl('page').hasError('required')">请选择卡券</div>
                </div>
              </div>
              <div nz-form-item nz-row style="margin-bottom:8px;">
                <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="4">
                  <button nz-button [nzSize]="'large'" [nzType]="'primary'" (click)="goSendStep()">下一步</button>
                  <button nz-button [nzSize]="'large'" [nzType]="'default'" type="button" (click)="goBack(0)" style="margin-left: 20px">上一步</button>
                </div>
              </div>
            </ng-container>

            <ng-container *ngIf="current === 2">
              <div nz-form-item nz-row>
                <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>发送时间：</div>
                <div nz-form-control nz-col [nzSm]="20" [nzXs]="24">
                  <nz-radio-group [(ngModel)]="radioValue" [ngModelOptions]="{standalone: true}" (ngModelChange)="toggleSendMode($event)">
                    <label nz-radio [nzValue]="'timing'">
                      <span>定时发送</span>
                    </label>
                    <label nz-radio [nzValue]="'atonce'">
                      <span>立即发送</span>
                    </label>
                  </nz-radio-group>
                </div>
              </div>
              <div nz-form-item nz-row>
                <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>选择时间：</div>
                <div nz-form-control nz-col [nzSm]="20" [nzXs]="24">
                  <nz-datepicker
                    style="width:224px;"
                    [(ngModel)]="_date"
                    [nzShowTime]="true"
                    [nzDisabled]="radioValue === 'atonce'"
                    [nzDisabledDate]="_disabledStartDate"
                    [ngModelOptions]="{standalone: true}"
                    [nzPlaceHolder]="'请选择时间'"
                    [nzFormat]="'YYYY-MM-DD HH:mm:ss'"
                  ></nz-datepicker>
                </div>
              </div>
              <div nz-form-item nz-row style="margin-bottom:8px;">
                <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="4">
                  <button nz-button [nzSize]="'large'" [nzType]="'primary'" (click)="goConfirmStep()">下一步</button>
                  <button nz-button [nzSize]="'large'" [nzType]="'default'" type="button" (click)="goBack(1)" style="margin-left: 20px">上一步</button>
                </div>
              </div>
            </ng-container>

            <ng-container *ngIf="current === 3">
                <div nz-form-item nz-row *ngIf="activeType === 0">
                  <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>转跳商品：</div>
                  <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('page')">
                    {{ activeTypeText }}
                  </div>
                </div>
                <div nz-form-item nz-row *ngIf="activeType === 3">
                  <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>转跳商品：</div>
                  <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('page')">
                    <div class="init-content" *ngIf="!checkedGoodsInfo['id']">
                      <button nz-button [nzType]="'primary'" (click)="addGoods()">
                        <span><i class="anticon anticon-plus"></i> 添加商品</span>
                      </button>
                    </div>
                    <div class="checked-goods-container" *ngIf="!!checkedGoodsInfo['id']">
                      <div class="name">i
                        <img src="{{aliyunOssOutputUrl+'/'+checkedGoodsInfo.first_picture}}" alt="">
                        <div>{{checkedGoodsInfo.name}}</div>
                      </div>
                      <div class="info">
                        <div>
                          <span class="title">商品分类</span>
                          <nz-tag [nzColor]="'#fff'" *ngFor="let ite of checkedGoodsInfo.goods_category">{{ite}}</nz-tag>
                          <span *ngIf="checkedGoodsInfo.goods_category ? !checkedGoodsInfo.goods_category.length : true">无分类</span>
                        </div>
                        <div><span class="title">商品库存</span> <span>{{checkedGoodsInfo.in_stock}}</span></div>
                      </div>
                    </div>
                    <div nz-form-explain *ngIf="getFormControl('page').dirty&&getFormControl('page').hasError('required')">请选择商品</div>
                  </div>
                </div>
                <div nz-form-item nz-row *ngIf="skuStatus && activeType === 3">
                  <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>商品属性：</div>
                  <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                    <label nz-checkbox *ngFor="let item of checkedGoodsInfo['sku']" [ngModelOptions]="{standalone: true}" [(ngModel)]="item.checked" (ngModelChange)="dealSku()">
                      <span>{{item.name||item.describe||'无规格'}}</span>
                    </label>
                    <div nz-form-explain *ngIf="!hasCheckedSku">请至少选择一个商品属性</div>
                  </div>
                </div>
                <div nz-form-item nz-row *ngIf="activeType === 4">
                  <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>转跳活动：</div>
                  <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('page')">
                    <div class="init-content" *ngIf="!checkedActivityInfo['id']">
                      <button nz-button [nzType]="'primary'" (click)="addActivity()">
                    <span>
                      <i class="anticon anticon-plus"></i> 添加活动</span>
                      </button>
                    </div>
                    <div class="checked-goods-container" *ngIf="!!checkedActivityInfo['id']">
                      <div class="name">
                        <nz-tag [nzColor]="checkedActivityInfo['type']['color']">{{ checkedActivityInfo['type']['text'] }}</nz-tag>
                        <span>{{checkedActivityInfo['name']}}</span>
                      </div>
                      <div class="info">
                        <span class="title">活动有效期:</span>
                        <span class="title-content">从 {{ checkedActivityInfo['start_date'] }} 至 {{ checkedActivityInfo['end_date'] }}</span>
                        <span class="view-goods-btn" (click)="toggleViewActivityGoods()">查看商品
                      <i class="anticon" [ngClass]="{'anticon-up':checkedActivityInfo['flexable'],'anticon-down':!checkedActivityInfo['flexable']}"></i>
                    </span>
                      </div>
                      <div class="goods-wrap" *ngIf="checkedActivityInfo['flexable']">
                        <div>
                          <div>ID:{{ checkedActivityInfo['goodsDetail']['id'] }}</div>
                          <div class="goods-bt">
                            <div class="goods-name">{{ checkedActivityInfo['goodsDetail']['goods_name'] }}</div>
                            <div class="goods-right">
                              <div>商品价格</div>
                              <div>￥ {{ checkedActivityInfo['goodsDetail']['price'] }}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div nz-form-explain *ngIf="getFormControl('page').dirty&&getFormControl('page').hasError('required')">请选择拼团商品</div>
                  </div>
                </div>
                <div nz-form-item nz-row *ngIf="activeType === 6">
                  <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>转跳卡券：</div>
                  <div nz-form-control nz-col [nzSm]="20" [nzXs]="24" [nzValidateStatus]="getFormControl('page')">
                    <div class="init-content" *ngIf="!checkedCouponInfo['id']">
                      <button nz-button [nzType]="'primary'" (click)="addCoupon()">
                    <span>
                      <i class="anticon anticon-plus"></i> 添加卡券</span>
                      </button>
                    </div>
                    <div class="checked-goods-container" *ngIf="!!checkedCouponInfo['id']">
                      <div class="name">
                        <img src="{{ 'assets/images/coupon_icon.png' }}" alt="">
                        <span>{{ checkedCouponInfo['card_coupons_name'] }}</span>
                      </div>
                      <div class="info">
                        <div>
                          <span class="title">卡券有效期</span>
                          <span *ngIf="checkedCouponInfo['term_of_validity_time_start']" style="font-size: 12px;">{{checkedCouponInfo['term_of_validity_time_start']}} - {{checkedCouponInfo['term_of_validity_time_end']}}</span>
                          <span *ngIf="checkedCouponInfo['term_of_validity']" style="font-size: 12px;">{{ '领取后' + checkedCouponInfo['term_of_validity'] + '天内有效' }}</span>
                        </div>
                        <div>
                          <span class="title" style="font-size: 12px;">卡券库存</span>
                          <span>{{checkedCouponInfo['in_stock']}}</span>
                        </div>
                      </div>
                    </div>
                    <div nz-form-explain *ngIf="getFormControl('page').dirty&&getFormControl('page').hasError('required')">请选择卡券</div>
                  </div>
                </div>
              <div nz-form-item nz-row>
                <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>发送时间：</div>
                <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                  {{ radioValue === 'timing' ? formatDate()  : '立即发送' }}
                </div>
              </div>
              <div nz-form-item nz-row style="margin-bottom:8px;">
                <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="4">
                  <button nz-button [nzSize]="'large'" [nzType]="'default'" (click)="goprevStep()">上一步</button>
                  <button nz-button [nzSize]="'large'" [nzType]="'primary'" [nzLoading]="sending" type="button" (click)="_submitForm()" style="margin-left: 20px">发送</button>
                </div>
              </div>
            </ng-container>
          </form>
        </div>
      </div>
    </div>

    <div class="steps-content" style="min-height:400px;margin-top:137px;" *ngIf="current === 4">
      <div nz-row style="display: flex;justify-content: center;align-items: center;">
        <div nz-col style="text-align: center;">
          <img src="{{ 'assets/images/check_circle.png' }}" alt="">
          <h5 style="margin:17px 0;">通知创建成功</h5>
          <p>请返回通知列表查看</p>
          <button style="margin-top:55px;" nz-button [nzType]="'default'" [nzSize]="'default'" (click)="goList()">返回</button>
        </div>
      </div>
    </div>
  </main-content>
</main-layout>


<!-- 添加商品弹窗 start -->

<nz-modal
  [nzVisible]="goodsModalVisible"
  [nzTitle]="'添加商品'"
  [nzWidth]="'700px'"
  [nzContent]="modalContent"
  (nzOnCancel)="closeModal()"
  (nzOnOk)="confirmCheckedGoods()">
  <ng-template #modalContent>
    <div class="operate-line text-right">
      <nz-select
        style="width: 110px;"
        nzAllowClear
        [nzSize]="'large'"
        [nzPlaceHolder]="'请选择分类'"
        [(ngModel)]="selectedGroup"
        [nzShowSearch]="true">
        <nz-option
          *ngFor="let type of groupList"
          [nzLabel]="type.name"
          [nzValue]="type.id">
        </nz-option>
      </nz-select>
      <nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="keyword" [nzPlaceHolder]="'输入商品名称'"></nz-input>
      <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="searchGoods()">
        <span>查 询</span>
      </button>
      <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="resetGoods()">
        <span>重 置</span>
      </button>
    </div>
    <nz-table #nzTable
              [nzAjaxData]="goodsList"
              [nzLoading]="loading"
              [(nzPageIndex)]="page"
              [(nzPageSize)]="pageSize"
              [nzTotal] ="total"
              (nzPageIndexChange)="getGoodsList()">
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox>
        </th>
        <th nz-th><span>商品</span></th>
        <th nz-th><span>商品库存</span></th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let data of goodsList">
        <td nz-td nzCheckbox>
          <i class="icon iconfont icon-radio-unchecked radio" *ngIf="currentClickGoods['id'] !== data.id" (click)="currentClickGoods = data;"></i>
          <i class="icon iconfont icon-radio-checked checked radio" *ngIf="currentClickGoods.id === data.id"></i>
        </td>
        <td nz-td style="width: 420px;">
          <img class="goods-pic" src="{{aliyunOssOutputUrl+'/'+data.first_picture}}" alt="">
          <div class="goods-info">
            <div class="goods-num">
              <span class="product-id mr-5" *ngIf="data.goods_number">
                <nz-popover [nzTitle]="'商品编号'" *ngIf="data.goods_number.length>1" >
                  <span  nz-popover>商品编号:{{ data.goods_number[0]+"..." }}</span>
                  <ng-template #nzTemplate>
                    <div style="max-width:300px">
                      <span class="dis-inline" *ngFor="let item2 of  data.goods_number;let i2=index">
                        <span style="display:inline-block;width:">{{item2}}</span><span *ngIf="i2!=data.goods_number.length-1" class="ml-5 mr-5">|</span>
                      </span>
                    </div>
                  </ng-template>
                </nz-popover>
                <span *ngIf="data.goods_number.length==1">
                  商品编号:{{ data.goods_number[0] }}
                </span>
              </span>
              <div class="dis-inline"><nz-tag [nzColor]="'#1790FF'" *ngFor="let ite of data.goods_category">{{ite}}</nz-tag></div>
            </div>
            <div class="goods-name">{{data.name}}</div>
          </div>
        </td>
        <td nz-td>
          <div style="margin-right: 30px;">
            {{data.in_stock}}
            <nz-progress [ngModel]="50" [nzShowInfo]="false"></nz-progress>
          </div>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>

<!-- 添加商品弹窗 end -->





<!-- 添加卡券弹窗 -->
<nz-modal [nzVisible]="couponModalVisible" [nzTitle]="'添加卡券'" [nzWidth]="'700px'" [nzContent]="couponModalContent" (nzOnCancel)="closeCouponModal()"
          (nzOnOk)="confirmCheckedCoupon()">
  <ng-template #couponModalContent>
    <div class="operate-line text-right">
      <nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="keyword" [nzPlaceHolder]="'输入卡券名称'"></nz-input>
      <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="searchCoupon()">
        <span>查 询</span>
      </button>
      <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="resetCoupon()">
        <span>重 置</span>
      </button>
    </div>
    <nz-table #couponTable [nzAjaxData]="couponList" [nzLoading]="couponLoading" [(nzPageIndex)]="page" [(nzPageSize)]="pageSize"
              [nzTotal]="couponsTotal" (nzPageIndexChange)="getCouponList()">
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox style="width:80px;">
        </th>
        <th nz-th style="width: 240px;">
          <span>卡券</span>
        </th>
        <th nz-th>
          <span>卡券有效期</span>
        </th>
        <th nz-th>
          <span>卡券库存</span>
        </th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <ng-container *ngFor="let data of couponList;let i = index;">
        <tr nz-tbody-tr>
          <td nz-td nzCheckbox>
            <i class="icon iconfont icon-radio-unchecked radio" *ngIf="currentClickCoupon['id'] !== data.id" (click)="activityClickIndex = i;currentClickCoupon = data;"></i>
            <i class="icon iconfont icon-radio-checked checked radio" *ngIf="currentClickCoupon['id'] === data.id"></i>
          </td>
          <td nz-td>
            <div class="goods-info">
              <div class="goods-num">
                  <span class="product-id mr-5">
                    <span>ID:{{ data['id'] }}</span>
                  </span>
              </div>
              <div class="goods-name">{{data['card_coupons_name']}}</div>
            </div>
          </td>
          <td nz-td style="font-size: 12px;">
            <ng-container *ngIf="data['term_of_validity']">
              <div>{{ '领取后' + data['term_of_validity'] + '天内有效' }}</div>
            </ng-container>
            <ng-container *ngIf="data['term_of_validity_time_start']">
              <div>{{ data['term_of_validity_time_start'] }}</div>
              <div>{{ data['term_of_validity_time_end'] }}</div>
            </ng-container>
          </td>
          <td nz-td>
            <div style="margin-right: 30px;">
              <div>{{ data['in_stock'] }}</div>
              <nz-progress style="width:95px;" [nzShowInfo]="false" [ngModel]="data['in_stock']"></nz-progress>
            </div>
          </td>
        </tr>
      </ng-container>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>
<!-- 添加卡券弹窗 end -->



<!-- 添加活动弹窗 -->
<nz-modal [nzVisible]="activityModalVisible" [nzTitle]="'添加活动'" [nzWidth]="'700px'" [nzContent]="activityModalContent" (nzOnCancel)="closeActivityModal()"
          (nzOnOk)="confirmCheckedActivity()">
  <ng-template #activityModalContent>
    <div class="operate-line text-right">
      <nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="keyword" [nzPlaceHolder]="'输入活动名称'"></nz-input>
      <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="searchActivity()">
        <span>查 询</span>
      </button>
      <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="resetActivity()">
        <span>重 置</span>
      </button>
    </div>
    <nz-table #activityTable [nzAjaxData]="activityList" [nzLoading]="activityLoading" [(nzPageIndex)]="page" [(nzPageSize)]="pageSize"
              [nzTotal]="activitiesTotal" (nzPageIndexChange)="getActivityList()">
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox style="width:80px;">
        </th>
        <th nz-th style="width: 240px;">
          <span>活动</span>
        </th>
        <th nz-th>
          <span>活动有限期</span>
        </th>
        <th nz-th>
          <span>活动商品</span>
        </th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <ng-container *ngFor="let data of activityList;let i = index;">
        <tr nz-tbody-tr>
          <td nz-td nzCheckbox>
            <i class="icon iconfont icon-radio-unchecked radio" *ngIf="currentClickActivity['id'] !== data.id" (click)="activityClickIndex = i;getActivityGoodsList(data['id'],data['activity_goods'][0]['id']);currentClick(data)"></i>
            <i class="icon iconfont icon-radio-checked checked radio" *ngIf="currentClickActivity['id'] === data.id"></i>
          </td>
          <td nz-td>
            <div class="goods-info">
              <div class="goods-num">
                  <span class="product-id mr-5">
                    <span>ID:{{ data['id'] }}</span>
                  </span>
                <div class="dis-inline">
                  <nz-tag [nzColor]="'rgb(252,99,16)'" *ngIf="data['activity_goods'][0]['type'] === 1">普通拼团</nz-tag>
                </div>
                <div class="dis-inline">
                  <nz-tag [nzColor]="'rgb(252,30,16)'" *ngIf="data['activity_goods'][0]['type'] === 2">拉新拼团</nz-tag>
                </div>
                <div class="dis-inline">
                  <nz-tag [nzColor]="'rgb(252,40,16)'" *ngIf="data['activity_goods'][0]['type'] === 3">抽奖拼团</nz-tag>
                </div>
                <div class="dis-inline">
                  <nz-tag [nzColor]="'rgb(252,60,16)'" *ngIf="data['activity_goods'][0]['type'] === 4">团长免单</nz-tag>
                </div>
              </div>
              <div class="goods-name">{{data['name']}}</div>
            </div>
          </td>
          <td nz-td style="font-size: 12px;">
            <div>{{data['start_date']}}</div>
            <div>{{ data['end_date'] }}</div>
          </td>
          <td nz-td>
            <div style="margin-right: 30px;">
                <span style="color: #0F8EE9;font-size: 12px;cursor: pointer;" (click)="toggleFlexable(i)">查看活动商品
                  <i class="anticon" [ngClass]="{'anticon-up':data['flexable'],'anticon-down':!data['flexable']}"></i>
                </span>
            </div>
          </td>
        </tr>
        <ng-container *ngIf="data['flexable'] && data['goodsDetail']">
          <tr>
            <td nz-td>
              <img class="goods-preview" src="{{ aliyunOssOutputUrl + '/' + data['goodsDetail']['first_picture']  }}" alt="">
            </td>
            <td [attr.colspan]="2" nz-td>
              <div style="color: rgba(0,0,0,0.80);">ID:{{ data['goodsDetail']['id'] }}</div>
              <div>{{ data['goodsDetail']['goods_name'] }}</div>
            </td>
            <td nz-td>
              <div style="color: rgba(0,0,0,0.80);">商品价格</div>
              <div>￥ {{ data['goodsDetail']['price'] }}</div>
            </td>
          </tr>
        </ng-container>
      </ng-container>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>
<!-- 添加活动弹窗 end -->
